<!DOCTYPE HTML>
<html>
<head>
<title>Hud</title>
<script type="application/x-javascript">
    <!--
        var deg2rad = Math.PI / 180;
        var rad2deg = 180 / Math.PI;

        var pitch =70;
        var roll =20;
        var yaw = 200;

        var socket;
        function init() {

        if (window["WebSocket"]) {
        var host = "ws://localhost:56781/websocket/server";
        //host = "ws://173.203.100.4:8002/";
        try{
        socket = new WebSocket(host);
        //log('WebSocket - status '+socket.readyState);
        socket.onopen    = function(msg){ socket.send("onopen"); };
        socket.onmessage = function(msg){
          var b1 = msg.data.indexOf(",",0);
          var b2 = msg.data.indexOf(",",b1+1);

    var b3 = msg.data.indexOf(",",b2+1);
    var b4 = msg.data.indexOf(",",b3+1);
    var b5 = msg.data.indexOf(",",b4+1);


          roll = parseFloat( msg.data.substr(0,b1));
          pitch = parseFloat( msg.data.substr(b1+1,b2 - b1));
          yaw = parseFloat( msg.data.substr(b2+1,b3-b2));

           lat = parseFloat( msg.data.substr(b3+1,b4 - b3));
            lng = parseFloat( msg.data.substr(b4+1,b5 - b4));
            alt = parseFloat( msg.data.substr(b5+1));

          //alert("Received: "+msg.data);
        };
        socket.onerror   = function(msg){ alert("Error: "+msg.data); };
        socket.onclose   = function(msg){ alert("Disconnected - status "+this.readyState); };
        }
        catch(ex){ alert(ex); }
        } else {
        alert("This browser doesnt support websockets");
        }

        draw();

        }

        function draw() {

        setTimeout ( "draw()", 100 );

        //pitch -= 1.2;
        //roll += .75;

        //if (pitch < -90)
        //pitch = 90;
        //if (roll > 180)
        //roll = -180;

          var canvas = document.getElementById("canvas");
          if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            ctx.save();

            ctx.translate(canvas.width/2,canvas.height/2);

            ctx.rotate(-roll * deg2rad);

            var font = "Arial";
            var fontsize = canvas.height/30;
            var fontoffset = fontsize - 10;

            var halfwidth = canvas.width/2;
            var halfheight = canvas.height/2;

            var every5deg = -canvas.height / 60;

            var pitchoffset = -pitch * every5deg;

            var x = Math.sin(-roll * deg2rad);
            var y = Math.cos(-roll * deg2rad);


     gradObj = ctx.createLinearGradient(0,-halfheight * 2 ,0, halfheight *2);
     gradObj.addColorStop(0.0, "Blue");
     var offset = 0.5 + pitchoffset / canvas.height / 2 ;
     if (offset < 0) {
        offset = 0;
     }
     if (offset > 1) {
        offset = 1;
     }
     gradObj.addColorStop(offset, "LightBlue");
     gradObj.addColorStop(offset, "#9bb824");
     gradObj.addColorStop(1.0, "#414f07");



     ctx.fillStyle = gradObj;
     ctx.rect(-halfwidth * 2, -halfheight *2, halfwidth * 4, halfheight * 4);
     ctx.fill();


                    var lengthshort = canvas.width / 12;
                    var lengthlong = canvas.width / 8;

                    for (var a = -90; a <= 90; a += 5)
                    {
                        // limit to 40 degrees
                        if (a >= pitch - 34 && a <= pitch + 25)
                        {
                            if (a % 10 == 0)
                            {
                                if (a == 0)
                                {
                                    DrawLine(ctx,"White",4, canvas.width / 2 - lengthlong - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthlong - halfwidth, pitchoffset + a * every5deg);
                                }
                                else
                                {
                                    DrawLine(ctx,"White",4, canvas.width / 2 - lengthlong - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthlong - halfwidth, pitchoffset + a * every5deg);
                                }
                                drawstring(ctx, a, font, fontsize + 2, "White", canvas.width / 2 - lengthlong - 30 - halfwidth - (fontoffset * 1.7), pitchoffset + a * every5deg - 8 - fontoffset);
                            }
                            else
                            {
                                DrawLine(ctx,"White",4, canvas.width / 2 - lengthshort - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthshort - halfwidth, pitchoffset + a * every5deg);
                            }
                        }
                    }


                    ctx.translate(0,canvas.height/14);

                    lengthlong = canvas.height / 66;

                    var extra = canvas.height / 15 * 7;


     var pointlist = new Array();
     pointlist[0] = 0;
     pointlist[1] = -lengthlong * 2 - extra;
     pointlist[2] = -lengthlong;
     pointlist[3] = -lengthlong - extra;
     pointlist[4] = lengthlong;
     pointlist[5] = -lengthlong - extra;

        DrawPolygon(ctx,"RED",4,pointlist)


                        for (var a = -45; a <= 45; a += 15)
                    {
                        ctx.restore();
                        ctx.save();
                        ctx.translate(canvas.width / 2, canvas.height / 2 + canvas.height/14);
                        ctx.rotate(a * deg2rad);
                        drawstring(ctx, a, font, fontsize, "White", 0 - 6 - fontoffset, -lengthlong * 2 - extra);
                        DrawLine(ctx,"White",4, 0, -halfheight, 0, -halfheight - 10);

                    }


                    ctx.restore();
                    ctx.save();

                    DrawEllipse(ctx,"red",4,halfwidth - 10, halfheight - 10, 20, 20);
                    DrawLine(ctx,"red",4, halfwidth - 10 - 10, halfheight, halfwidth - 10, halfheight);
                    DrawLine(ctx,"red",4, halfwidth - 10 + 20, halfheight, halfwidth - 10 + 20 + 10, halfheight);
                    DrawLine(ctx,"red",4, halfwidth - 10 + 20 / 2,  halfheight - 10, halfwidth - 10 + 20 / 2,  halfheight - 10 - 10);


    //DrawLine(ctx,"GREEN",4,-halfwidth,0,halfwidth,0);

          }

          try {

        var myLatLng = {lat: lat, lng: lng};

        var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Hello World!'
      });

          //socket.send("test "+pitch+"\n");
          } catch (ex){ }// alert(ex); }




        }
        function DrawEllipse(ctx,color,linewidth,x1,y1,width,height) {
            ctx.lineWidth = linewidth;
            ctx.strokeStyle = color;
            ctx.beginPath();
            ctx.moveTo(x1 + width / 2,y1 + height);
                            var x, y;
                    for (var i = 0; i <= 360; i += 1)
                    {
                        x = Math.sin(i * deg2rad) * width / 2;
                        y = Math.cos(i * deg2rad) * height  / 2;
                        x = x + x1 + width / 2;
                        y = y + y1 + height / 2;
                        ctx.lineTo(x,y);
                    }

            //ctx.moveTo(x1,y1);

            ctx.stroke();
            ctx.closePath();
        }
        function DrawLine(ctx,color,width,x1,y1,x2,y2) {
            ctx.lineWidth = width;
            ctx.strokeStyle = color;
            ctx.beginPath();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.stroke();
            ctx.closePath();
        }
        function DrawPolygon(ctx,color,width,list) {
            ctx.lineWidth = width;
            ctx.strokeStyle = color;
            ctx.beginPath();
            ctx.moveTo(list[0],list[1]);
            for ( var i=2, len=list.length; i<len; i+=2 ){
                ctx.lineTo(list[i],list[i+1]);
            }
            ctx.lineTo(list[0],list[1]);
            ctx.stroke();
            ctx.closePath();
        }
        function  drawstring(ctx,string,font,fontsize,color,x,y) {
            ctx.font = fontsize + "pt "+font;
            ctx.fillStyle = color;
            ctx.fillText(string,x,y + fontsize);
                                               }


        -->
    </script>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>

</head>
<body onload="init();">
    <div style="float: left; width: 660px;">
        <canvas id="canvas" width="640" height="480">
            <p>
                This example requires a browser that supports the
                <a href="http://www.w3.org/html/wg/html5/">HTML5</a>
                &lt;canvas&gt; feature.
            </p>
        </canvas>
    </div>
    <div id="map"></div>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: -35, lng: 117.89 },
                zoom: 8
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDW05vWXeNIfZAN4Ter8gf4YLg8rPHZToc&callback=initMap" async defer></script>

</body>
</html>